<script setup lang="ts">
import { Aim } from '@element-plus/icons-vue'
import { useEyeDropper } from '@vueuse/core'

const {
  open,
  sRGBHex,
} = useEyeDropper()
</script>

<template>
  <ElSpace>
    <ElButton
      type="primary"
      :icon="Aim"
      circle
      @click="open"
    />

    <span
      v-underline
      :style="{ color: sRGBHex }"
    >
      {{ sRGBHex }}
    </span>

    <ElIcon
      v-if="sRGBHex"
      v-copy="`${sRGBHex}`"
      class="cursor-pointer"
    >
      <CopyDocument color="#67c23a" />
    </ElIcon>
  </ElSpace>
</template>
